<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>有人智造-经营驾驶舱</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
  <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
  <style>
    .body{
      width: 100%;
      /*height: 1100px;*/
      height: 100%;
      /*background-color: #f5f7fa;*/
      font-size: 25px;
      background: linear-gradient(to bottom right, blue, pink);
      background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
      background-size: cover;
    }
    h3{
      border-radius: 20px 20px 0 0;
      padding-left: 20px;
    }
    h1{
      width: 30%;
      margin: 0 auto;
      color: white;
      background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
      linear-gradient(45deg, transparent 34px, #134194 0) left;
      background-size: 50% 100%;
      background-repeat: no-repeat;
      margin-bottom: 20px;
    }
    table th:nth-child(odd){
      background-color: #2bb9ba;
      color: white;
    }
    table th:nth-child(even){
      background-color:#134094;
      color: white;
    }
    table tr:nth-child(odd){
      background-color: #7DC4CC;
      color: white;
    }

    .table1 tr th{
      padding: 0;
      text-align: center;
    }
    .table1 tr td{
      padding: 0;
    }
    .main1{
      width: 100%;
      height: 1100px;
      background-color: #7bd4ce;
    }
    .container {
      max-width: 2500px;
      width: 100%;
      /*width: 1510px;*/
      /*margin: 0 auto;*/
      display: inline-block;
      padding: 0;
      /*background-color: red;*/
      height: 1050px; /* 设置容器的高度 */
      overflow: auto; /* 启用垂直滚动 */
      /*margin-left: 70px;*/
      overflow-y: hidden;
      overflow-x: hidden;
      position: relative; /* 相对定位以容纳滚动内容 */
      /*display: flex;*/
      /*float: left;*/

    }
    .container1{
      width: 100%;
      /*width: 1800px;*/
      /*background-color: #666aff;*/
      position: absolute; /* 绝对定位 */
      top: 0; /* 初始位置为顶部 */
      /*animation: move 5s linear infinite; !* 使用动画滚动 *!*/
      animation-name: move;
      /*animation-duration: 800s;*/
      animation-timing-function: linear;
      /*animation-delay: 1s;*/
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-fill-mode: forwards;
    }
    /* 滚动动画 */
    @keyframes move {
      /*0% {*/
      /*    top: 0; !* 开始时回到顶部 *!*/
      /*}*/
      /*100% {*/
      /*    top: -100%; !* 结束时滚动到底部 *!*/
      /*}*/
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(-10%);
      }
    }
    .return{
      position: fixed;
      top: 10px;
      left:10px;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body class="body">
<div class="main" >
  <img src="/static/img/return.png" alt="返回主页" class="return">
  <h1 style="text-align: center ">经营驾驶舱</h1>
  <div class="main">
    <div class="main1">
      <table class="table table1" style="margin-bottom: -3px">
        <tr style="text-align: center;">
          <th width="40px" style="padding: 0;font-size: 20px">序号</th>
          <th width="150px">生产订单编号</th>
          <th width="200px">单据号</th>
          <th width="150px">物料料号</th>
          <th width="150px">检验结果</th>
          <th width="350px">检验周期</th>
        </tr>
      </table>
      <div class="{if $count>=28}container{/if}">
        <div class="{if $count>=28}container1{/if}" style="animation-duration:{$count/5}s;">
          <table class="table table1">
            {foreach $data as $k=>$v}
            <tr style="text-align: center ;">
              <td width="40px" style="font-size: 20px;padding: 0">{$k+1}</td>
              <td width="150px">{$v['PROJECT_NO']}</td>
              <td width="200px">{$v['DOC_NO']}</td>
              <td width="150px">{:$v['ITEM_CODE']}</td>
              <td width="150px">{$v['TEST_RESULT']}</td>
              <td width="350px" style="font-size: 15px">{$v['TEST_START_TIME']}~{$v['TEST_END_TIME']}</td>
            </tr>
            {/foreach}
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  $(".return").click(function (){
    window.history.back();
  })
</script>
</html>